const App = {
    mixins: [Query],//配置文件，路径/utils/mixins.js
    data() {
        return {
            photo,
            page: {
                value1: '',
                PageNumber: 1, //页码
                RowAmount: 10,
                Condition: window.btoa(unescape(encodeURIComponent("%%")))
            },
            str1: '',
            str: '',
            // showDialog:true,
            Scenic_Spot_Name: '',
            QRData: [],
        }
    },
    mounted() {

    },
    methods: {
        check() {
            this.page.Condition = window.btoa(unescape(encodeURIComponent("%" + this.page.value1 + "%")));
            this.postgetList(this.page);
        },
        handleQR(row) {
            $.ajax({
                headers: requestHeaders(),
                url: `${mh}/generalBusiness/generalQueryByTableName`,
                method: "post",
                data: {
                    Data: 'scenic_spot_detail',
                    Condition: `Scenic_Spot_SerialNumber='${row.Scenic_Spot_SerialNumber}'`
                },
                success: (res) => {
                    this.QRData = res;
                    this.showDialog = true;
                    const timer = setTimeout(() => {
                       
                        res.forEach(item => {
                            console.log(`${h5}scenic_spot_detail/index.html?Scenic_Spot_Detail_SerialNumber=${item.Scenic_Spot_Detail_SerialNumber}`);
                            const qrElement = document.getElementById(`qr-img${item.Scenic_Spot_Detail_SerialNumber}`);
                            if (qrElement) qrElement.innerHTML = "";
                            // console.log(`${h5}scenic_spot_detail/index.html?Scenic_Spot_Detail_SerialNumber=${item.Scenic_Spot_Detail_SerialNumber}`.length);
                            new QRious({
                                element: qrElement,
                                value: item.QR_URL ? item.QR_URL : `${h5}scenic_spot_detail/index.html?Scenic_Spot_Detail_SerialNumber=${item.Scenic_Spot_Detail_SerialNumber}`,
                                size: 120, // 增大尺寸到256px
                                level: "H", // 最高容错率（可恢复30%损坏）
                                background: "#ffffff", // 明确背景色
                                foreground: "#000000", // 明确前景色
                                quietZone: 1, // 增加空白边距
                            });
                            if (qrElement) {
                                qrElement.style.transition = "all 0.5s ease";
                                qrElement.style.opacity = "0";
                                setTimeout(() => {
                                    qrElement.style.opacity = "1";
                                }, 100);
                            }
                        })
                        clearTimeout(timer);
                    })
                },
                complete: (XMLHttpRequest) => {
                    requestPretreatment(XMLHttpRequest)
                },
            });
            // if (row.QR_URL) {
            //     this.Scenic_Spot_Name = row.Scenic_Spot_Name;
            //     this.showDialog = true;
            //     this.$nextTick(() => {
            //         const qrElement = document.getElementById(`qr-img`);

            //         // 清空原有二维码（如果存在）
            //         if (qrElement) qrElement.innerHTML = "";

            //         // 优化后的二维码生成参数
            //         new QRious({
            //             element: qrElement,
            //             value: row.QR_URL,
            //             size: 256, // 增大尺寸到256px
            //             level: "H", // 最高容错率（可恢复30%损坏）
            //             background: "#ffffff", // 明确背景色
            //             foreground: "#000000", // 明确前景色
            //             quietZone: 4, // 增加空白边距
            //         });

            //         // 生成成功后添加动画效果
            //         if (qrElement) {
            //             qrElement.style.transition = "all 0.5s ease";
            //             qrElement.style.opacity = "0";
            //             setTimeout(() => {
            //                 qrElement.style.opacity = "1";
            //             }, 100);
            //         }
            //     })
            // } else {
            //     this.$message({
            //         type: 'warning',
            //         message: '该景区未配置二维码链接'
            //     });
            // }
        },
        downloadQR() {
            const imgElement = document.getElementById('qr-img');
            const imgSrc = imgElement.src;
            // 创建一个临时的a标签
            const link = document.createElement('a');
            link.href = imgSrc;
            link.download = this.Scenic_Spot_Name + (+new Date()) + '.png'; // 设置下载的文件名

            // 将a标签添加到文档中（不需要显示）
            document.body.appendChild(link);

            // 触发点击事件
            link.click();

            // 移除a标签
            document.body.removeChild(link);
        }
    },

};

const { createApp } = Vue;
const app = createApp(App);
//这种方式是引入全部图标，无需单个引入
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
}
const ElMessage = ElementPlus.ElMessage;
app.use(ElementPlus, { locale: zhCn });
app.mount("#app");
